<template>
    <div class="singer-intro">
        <van-loading v-if="loading" type="spinner" />
        <div v-else>
            <div v-if="desc">
                <h2>简介</h2>
                <div>{{ desc }}</div>
            </div>
            <div v-if="basicItem.length">
                <h2>基本资料</h2>
                <div>
                    <div v-for="(item, index) in basicItem" :key="index">
                        <span>{{ item.key }}</span>
                        <span style="white-space: pre-wrap">{{ item.value }}</span>
                    </div>
                </div>
            </div>
            <div v-for="(item, index) in otherItem" :key="index">
                <h2>{{ item.key }}</h2>
                <div style="white-space: pre-wrap">{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["singerId"],
    data() {
        return {
            desc: "",
            basicItem: [],
            otherItem: [],
            loading: false
        }
    },
    methods: {
        getData() {
            this.loading = true
            this.$request("get", "/singer/desc", {
                singermid: this.singerId,
            }).then((res) => {
                if (res.data) {
                    this.desc = res.data.desc
                    this.basicItem = res.data.basic.item
                    this.otherItem = res.data.other.item
                }
            }).catch(err => {
                console.error('获取歌手信息失败:', err)
            }).finally(() => {
                this.loading = false
            });
        }
    },
    mounted(){
        if (this.singerId) {
            this.getData()
        }
    }
}
</script>

<style scoped>
.singer-intro {
    padding: 1rem;
}
.singer-intro h2 {
    font-size: 1.2rem;
    margin: 1rem 0;
    color: #333;
}
.singer-intro div {
    line-height: 1.6;
    color: #666;
}
</style>